<div class="one"  style="float: left">
    <ul>
        <!--这是一个1级大循环-->
        <li class="one_li"><a href="">家用电器</a>
            <div class="two">
                <div class="two_data">
                    <ul>
                        <!--这是一个2级大循环-->
                        <li class="two_li">
                            <div class="two_one_div">
                                <span>图标类 </span><a href="" >我是2级类循环1</a>
                            </div>
                            <div class="three">
                            <ul><!--这是一个3级大循环-->
                                <li><a href="">我是3级类循环11</a></li>
                                <li><a href="">我是3级类循环12</a></li>
                                <li><a href="">我是3级类循环13</a></li>
                                <li><a href="">我是3级类循环14</a></li>
                                <li><a href="">我是3级类循环15</a></li>
                                <!--这是一个3级大循环-->
                            </ul>
                            </div>
                        </li>
                        <div style="clear: both"></div>
                        <!--这是一个2级大循环-->
                        <!--这是一个2级大循环-->
                        <li class="two_li">
                            <div class="two_one_div">
                                <span>图标类 </span><a href="" >我是2级类循环2</a>
                            </div>
                            <div class="three">
                                <ul><!--这是一个3级大循环-->
                                    <li><a href="">我是3级类循环21</a></li>
                                    <li><a href="">我是3级类循环22</a></li>
                                    <li><a href="">我是3级类循环23</a></li>
                                    <li><a href="">我是3级类循环24</a></li>
                                    <li><a href="">我是3级类循环25</a></li>
                                    <!--这是一个3级大循环-->
                                </ul>
                            </div>
                        </li>
                        <div style="clear: both"></div>
                        <!--这是一个2级大循环-->
                    </ul>

                </div>
                <div class="pic">
                   <img width="100%" height="100%" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546848932402&di=4f372ce9e11d0af8034a29f1ac0e8a70&imgtype=0&src=http%3A%2F%2Fimg3.yxlady.com%2Fyl%2FUploadFiles_5361%2F20140813%2F20140813152343977.jpg" />
                </div>
            </div>
        </li>
        <!--这是一个1级大循环-->
        <!--第2个一级大循环 循环的时候使用上一组就可以-->
        <!--这是一个1级大循环-->
        <li class="one_li"><a href="">化妆品/美容</a>
            <div class="two">
                <div class="two_data">
                    <ul>
                        <!--这是一个2级大循环-->
                        <li class="two_li">
                            <div class="two_one_div">
                                <span>图标类 </span><a href="" >我是2级类循环A</a>
                            </div>
                            <div class="three">
                                <ul><!--这是一个3级大循环-->
                                    <li><a href="">我是3级类循环A11</a></li>
                                    <li><a href="">我是3级类循环A12</a></li>
                                    <li><a href="">我是3级类循环A13</a></li>
                                    <li><a href="">我是3级类循环A14</a></li>
                                    <li><a href="">我是3级类循环A15</a></li>
                                    <!--这是一个3级大循环-->
                                </ul>
                            </div>
                        </li>
                        <div style="clear: both"></div>
                        <!--这是一个2级大循环-->
                        <!--这是一个2级大循环-->
                        <li class="two_li">
                            <div class="two_one_div">
                                <span>图标类 </span><a href="" >我是2级类循环B</a>
                            </div>
                            <div class="three">
                                <ul><!--这是一个3级大循环-->
                                    <li><a href="">我是3级类循环B21</a></li>
                                    <li><a href="">我是3级类循环B22</a></li>
                                    <li><a href="">我是3级类循环B23</a></li>
                                    <li><a href="">我是3级类循环B24</a></li>
                                    <li><a href="">我是3级类循环B25</a></li>
                                    <!--这是一个3级大循环-->
                                </ul>
                            </div>
                        </li>
                        <div style="clear: both"></div>
                        <!--这是一个2级大循环-->
                    </ul>

                </div>
                <div class="pic">
                    <img width="100%" height="100%" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546849010764&di=88c0cad1e1f4567c4ae34439e1b71ae3&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171222%2F50c26415d36e4c12a584535dca0817ac.jpeg" />
                </div>
            </div>
        </li>
        <!--这是一个1级大循环-->
    </ul>


</div>

<style>
    *{padding:0;margin:0}
    ul,ol,li{ list-style:none;}
    .one .one_li{width:600px; width:220px; background: #8fdf82;margin-bottom: 1px; padding: 0 20px;}
    .one .one_li>a{ width: 100%;}
    .three{ width: 500px;}
    .three li{ float: left; margin: 0 20px;}
    .two { position:absolute;left:220px;top:0;display: none;}
    .two_data {width: 700px;height: 300px; background: #0f0; float: left;}
    .pic{width: 300px;height: 300px; background: #ff0000;float: left;}
    .two_li>a{ border: 1px solid #0D89E1;display: block;float: left; width: 100px;}
    .two_li>div,two_li>ul{float: left; display: block}
    .two_one_div{width: 200px;}
</style>
<script src="http://lihai.xmdonkey.com/static/shop/js/jquery-1.11.3.min.js"></script>
<script>
    $('.one li').mouseover(function(){
        $(this).find('.two').css({'display':"block"});
    })
    $('.one li').mouseout(function(){
        $(this).find('.two').css({'display':"none"});
    })
</script>
